<template>
  <div class="heard-box" v-if="list.length > 0">
    <p class="heard-box-text">模版案例</p>
    <t-row class="heard-list" v-if="list.length > 2" :gutter="20">
      <t-col @click="lookPath(item.id)" :span="4" v-for="(item, index) in list" :key="index">
        <div class="exbit-item exbit-item-active">
          <div class="exbit-item-before"></div>
          <div class="item-img">
            <div class="img-shadow"></div>
            <div class="right-star">
              <infoStar :shearUrl="cancatUrl + 'web/' + item.id" @starEmit="starEmit" :index="index" :info="item" />
            </div>
            <img
              class="t-image t-image--fit-cover t-image--position-center"
              :src="urls + item.coverUrl + '?imageView2/0/w/642/format/webp'"
              alt=""
            />
          </div>
          <a @click.stop="blanks" class="btm-box" target="_blank" :href="cancatUrl + 'web/' + item.id">
            <div class="item-title">
              <span>
                {{ item.name }}
                <p class="solid"></p>
              </span>
            </div>
            <div class="item-avatar">
              <div class="auth-avatar-box-home">
                <t-avatar
                  size="24px"
                  :image="
                    item.orgLogoUrl
                      ? urls + item.orgLogoUrl + '?imageView2/2/w/48/h/48/format/webp'
                      : publicUrls + 'assets/img/companyImg.png'
                  "
                ></t-avatar>
                <img
                  v-if="item.orgAuthType > 0"
                  class="auth-avatar-box-home-img"
                  src="//static.jiyi.show/door/isAuthIcon.svg"
                  alt=""
                />
              </div>

              <span class="avatar-name">{{ item.orgName }}</span>
            </div>
            <div class="item-description-font-size">
              {{ item.description }}
            </div>
          </a>
        </div>
      </t-col>
    </t-row>
    <div class="exhibitions-parents" v-else>
      <div
        class="exhibitions-item-parent"
        :class="{ 'exhibitions-item-parent-index': index !== 0 }"
        @click="lookPath(item.id)"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="exhibitions-item" :class="{ 'exhibitions-item-center': index === 1 }">
          <a
            @click.stop="chageOn"
            target="_blank"
            :href="cancatUrl + 'web/' + item.id"
            class="item-left"
            v-if="index !== 1"
          >
            <div>
              <div class="item-title">
                <span>
                  {{ item.name }} {{ item.subTitle ? '——' + item.subTitle : item.subTitle }}
                  <span class="solid"></span>
                </span>
              </div>
              <div class="item-avatar">
                <div class="auth-avatar-box-home">
                  <t-avatar
                    size="24px"
                    :image="
                      item.orgLogoUrl
                        ? urls + item.orgLogoUrl + '?imageView2/2/w/48/h/48/format/webp'
                        : publicUrls + 'assets/img/companyImg.png'
                    "
                  ></t-avatar>
                  <img
                    v-if="item.orgAuthType > 0"
                    class="auth-avatar-box-home-img"
                    src="//static.jiyi.show/door/isAuthIcon.svg"
                    alt=""
                  />
                </div>
                <span class="avatar-name">{{ item.orgName }}</span>
              </div>
            </div>

            <div class="item-description">
              {{ item.description }}
            </div>
          </a>
          <div class="item-left-fit" v-if="index === 1"></div>
          <div class="item-right" :class="{ 'item-right-center': index == 1 }">
            <div class="item-right-after"></div>
            <div class="right-shadow"></div>
            <div class="right-star">
              <infoStar @starEmit="starEmit" :index="index" :info="item" :shearUrl="cancatUrl + 'web/' + item.id" />
            </div>
            <img
              class="t-image t-image--fit-cover t-image--position-center"
              :src="urls + item.coverUrl + '?imageView2/1/h/415/w/1344/format/webp'"
              alt=""
            />
          </div>
          <div class="item-left-fit" v-if="index !== 1"></div>
          <a
            @click.stop="chageOn"
            target="_blank"
            :href="cancatUrl + 'web/' + item.id"
            class="item-left item-left-center"
            v-if="index == 1"
          >
            <div>
              <div class="item-title">
                <span>
                  {{ item.name }} {{ item.subTitle ? '——' + item.subTitle : item.subTitle }}
                  <span class="solid"></span>
                </span>
              </div>
              <div class="item-avatar">
                <div class="auth-avatar-box-home">
                  <t-avatar
                    size="24px"
                    :image="
                      item.orgLogoUrl
                        ? urls + item.orgLogoUrl + '?imageView2/2/w/48/h/48/format/webp'
                        : publicUrls + 'assets/img/companyImg.png'
                    "
                  ></t-avatar>
                  <img
                    v-if="item.orgAuthType > 0"
                    class="auth-avatar-box-home-img"
                    src="//static.jiyi.show/door/isAuthIcon.svg"
                    alt=""
                  />
                </div>
                <!-- <t-avatar size="24px" :image="urls + item.orgCoverUrl + '?imageView2/2/w/48/h/48/format/webp'"></t-avatar> -->
                <span class="avatar-name">{{ item.orgName }}</span>
              </div>
            </div>
            <div class="item-description">
              {{ item.description }}
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { linkurl } from '@/utils/minxin'; 
import { cancatUrl } from '@/utils/minxin';
import infoStar from '@/components/infoStar/infoStar.vue';
import { list3 } from '../index';
import { addBrowseTemplate, pathSquare } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { AddLike, AddFollow } from '@/api/door/door';
import { onMounted, ref, onUnmounted, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useProjectStore } from '@/store';
import { templateProject } from '@/api/project/project';

const router = useRouter();
const store = useProjectStore();
const clock1 = ref(3);
const props = defineProps({
  templateId: {
    type: Number,
  },
});
const parmas = ref({
  type: 3,
  pageSize: 2,
});
const list = ref([]);
const blanks = () => {};
const init = async () => {
  try {
    let { data } = await templateProject(props.templateId, 3);
    // data.forEach((element) => {
    //   element.beginTime = element.beginTime.substring(0, 10);
    // });
    console.log(data, '相关案例');
    list.value = data;
    // list.value = list1;
  } catch (err) {
    console.log(err, '相关案例');
  }
};
init();
const like = async (e: number) => {
  try {
    let { statusCode } = await AddLike({
      refType: 3,
      refId: list.value[e].id,
    });
    if (statusCode == 200) {
      list.value[e].likeTotal = list.value[e].likeTotal + 1;
    }
  } catch {}
};
const lookPath = (e: number) => {
  let url = cancatUrl + `web/` + e;
  window.open(url, '_blank');
};
const starEmit = async (e: number) => {
  try {
    let { statusCode } = await AddFollow({
      refType: 3,
      refId: list.value[e].id,
    });
    if (statusCode == 200) {
      if (!list.value[e].isFollow) {
        list.value[e].followTotal = list.value[e].followTotal + 1;
        list.value[e].isFollow = true;
      } else {
        list.value[e].followTotal = list.value[e].followTotal - 1;
        list.value[e].isFollow = false;
      }
    }
  } catch {}
};

const pathTemplate = (e) => {
  let url = cancatUrl + `web/` + e;
  window.open(url, '_blank');
};
const chageOn = () => {};
watch(
  () => props.templateId,
  () => {
    init();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import '../exhit.less';
.heard-box {
  width: 100%;
  margin-top: 32px;
}
.heard-box-text {
  font-size: 22px;
  font-weight: 600;
  color: #070707;
  line-height: 34px;
  margin-bottom: 24px;
   font-family: PingFangSC-Regular, PingFang SC;
}
.heard-list {
  display: flex;
}

.exbit-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f5f5 0%, #f2eded 100%);
  border-radius: 6px;
  transition: all 0.3s;
}
.exbit-item-before {
  z-index: 2;
  transition: all 0.3s;
  // display: block;
  position: absolute;
  top: -0px;
  left: -0px;
  width: calc(100%);
  height: calc(100%);
  background: linear-gradient(135deg, #f5f5f5 0%, #f2eded 100%);
  border-radius: 6px;
}
.item-img {
  z-index: 20;
  position: relative;
  width: 100%;
  padding-top: 62%;
  border-radius: 6px 6px 0px 0px;
  overflow: hidden;
  img {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    margin: auto;
    display: block;
    width: 0px;
    height: 0px;
  }
}
.img-shadow {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  transition: all 0.3s;
}
.right-star {
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 648px;
  padding: 0 40px;
  z-index: 50;
  transition: all 0.4s;
}
.btm-box {
  z-index: 20;
  position: relative;
  width: 100%;
  // flex: 1;
  padding: 40px;
  box-shadow: none;
}
.item-title {
  display: flex;
  align-items: center;

  width: 100%;
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  span {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .solid {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 2px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.8;
      transition: all 0.3s;
    }
  }
}
.item-avatar {
  display: flex;
  align-items: center;
  margin-top: 4px !important;
}
.avatar-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  margin-left: 8px;
}
.item-description {
  // margin-top: 80px;
}
.exbit-item-active:hover {
  .solid {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000000;
    border-radius: 1px;
    opacity: 0.8;
    transition: all 0.3s;
  }
  .item-img {
    border-radius: 0px !important;
    img {
      transform: scale(1.1);
    }
  }

  .img-shadow {
    opacity: 1;
  }
  .right-star {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 0 40px;
    z-index: 50;
    transition: all 0.4s;
  }
}
.exbit-item-active1:hover {
  // margin-left: 0px !important;
  // margin-right: -14px;
}
.exbit-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 520px;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f5f5 0%, #f2eded 100%);
  border-radius: 6px;
  transition: all 0.3s;
  // margin-bottom: 20px;
}
// .item-img {
//   position: relative;
//   width: 424px;
//   height: 262px;
//   border-radius: 6px 6px 0px 0px;
//   overflow: hidden;
//   img {
//     width: 424px;
//     height: 262px;
//     transition: all 0.3s;
//   }
// }
.img-shadow {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  transition: all 0.3s;
}
.right-star {
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 100%;
  // width: 424px;
  padding: 0 24px;
  height: 32px;
  z-index: 50;
  transition: all 0.4s;
  z-index: 9899;
}
.btm-box {
  display: flex;
  flex-direction: column;

  width: 100%;
  flex: 1;
  padding: 20px;
}
.item-title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  line-height: 28px;
  span {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .solid {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 2px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.8;
      transition: all 0.3s;
    }
  }
}
.item-avatar {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.avatar-name {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  margin-left: 8px;
}
.item-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
}

// 鼠标激活效果
.exbit-item-active:hover {
  .exbit-item-before {
    top: -14px;
    left: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    border-radius: 6px;
  }
  .solid {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000000;
    border-radius: 1px;
    opacity: 0.8;
    transition: all 0.3s;
  }
  .item-img {
    border-radius: 0px !important;
    img {
      transform: scale(1.1);
    }
  }
  .img-shadow {
    opacity: 1;
  }
  .right-star {
    position: absolute;
    bottom: 24px;
    left: 0;
    width: 100%;
    padding: 0 24px;
    z-index: 50;
    transition: all 0.4s;
  }
}
.btm-solid-box {
  width: 1320px;
  height: 50px;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.08);
}

.t-row {
  margin-top: 0;
}
.t-col {
  display: flex;

  // height: 548px;
  // justify-content: center;
  margin-bottom: 0;
}

.exhibitions-parents {
  // margin-left: -14px;
}
.exhibitions-item {
  background: linear-gradient(135deg, #f5f5f5 0%, #f2eded 100%);
}
.exhibitions-item-parent-index {
  margin-top: 50px;
  // background: linear-gradient(135deg, #F5F5F5 0%, #F2EDED 100%);
}
.exhibitions-parents {
  padding-bottom: 10px;
}
.item-description-font-size {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  height: 48px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  margin-top: 64px;

  font-family: PingFangSC, PingFang SC;
}
</style>
